<template>
  <div class="config-container">
    <el-card shadow="never">
      <div slot="header">
        <!-- <span>配置管理</span> -->
        <el-button type="primary" size="small" style="float: right" @click="saveConfig" :loading="loading">
          保存配置
        </el-button>
      </div>

      <el-tabs v-model="activeTab" v-if="configData && configData.length > 0">
        <el-tab-pane label="订单配置" name="order">
          <order-config ref="orderConfig" :configData="filterConfig('order')" />
        </el-tab-pane>
        <el-tab-pane label="会员配置" name="member">
          <member-config ref="memberConfig" :configData="filterConfig('member')" />
        </el-tab-pane>
        <el-tab-pane label="支付配置" name="payment">
          <payment-config ref="paymentConfig" :configData="filterConfig('payment')" />
        </el-tab-pane>
        <el-tab-pane label="平台抽成" name="commission">
          <commission-config ref="commissionConfig" :configData="filterConfig('commission')" />
        </el-tab-pane>
        <el-tab-pane label="隐私政策" name="privacy">
          <privacy-config ref="privacyConfig" :configData="filterConfig('privacy')" />
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import OrderConfig from './components/OrderConfig'
import MemberConfig from './components/MemberConfig'
import PaymentConfig from './components/PaymentConfig'
import CommissionConfig from './components/CommissionConfig'
import PrivacyConfig from './components/PrivacyConfig'
import { getConfigList, saveConfigItem } from "./api/config";
export default {
  components: {
    OrderConfig,
    MemberConfig,
    PaymentConfig,
    CommissionConfig,
    PrivacyConfig
  },
  data() {
    return {
      activeTab: 'order',
      loading: false,
      configData: [
        // 原始数据
      ]
    }
  },
  methods: {
    filterConfig(type) {
      const map = {
        order: [
          'point_exchange_rule',
          'point_use_order_min_amount',
          'order_refund_max_hours',
          'order_freight',
          'order_free_shipping_min',
          'shop_settled_amount',
          'auto_cancel_order_minutes',
          'auto_comfirm_receipt_days',
          'auto_verify_order_days',
          'auto_evaluate_days',
          'auto_evaluate_content'
        ],
        member: [
          'open_vip_amount',
          'member_benefits_discount'
        ],
        payment: [
          'payment_module',
          'reservation_module'
        ],
        commission: [
          'new_car_platform_commission_rate',
          'lease_platform_commission_rate',
          'maintenance_platform_commission_rate',
          'tea_platform_commission_rate',
          'food_platform_commission_rate',
          'hotel_platform_commission_rate',
          'other_platform_commission_rate',
          'activity_platform_commission_rate',
          'knowledge_platform_commission_rate'
        ],
        privacy: [
          'activity_disclaimer',
          'club_privacy_policy'
        ],
      }

      return this.configData.filter(item => map[type].includes(item.code))
    },
    async saveConfig() {
      this.loading = true
      try {
        const orderData = this.$refs.orderConfig.getFormData()
        const memberData = this.$refs.memberConfig.getFormData()
        const paymentData = this.$refs.paymentConfig.getFormData()
        const commissionData = this.$refs.commissionConfig.getFormData()
        const privacyData = this.$refs.privacyConfig.getFormData()

        const allData = [...orderData, ...memberData, ...paymentData, ...commissionData, ...privacyData]

        await saveConfigItem({ config: allData })

        this.$message.success('配置保存成功')
      } catch (error) {
        // this.$message.error(error.message || '保存配置失败')
      } finally {
        this.loading = false
      }
    }
  },
  async created() {
    try {
      // 加载配置数据
      const { data } = await getConfigList()
      console.log(1, '获取配置', data);

      this.configData = data
    } catch (error) {
      this.$message.error('获取配置失败')
    }
  }
}
</script>

<style scoped>
.config-container {
  padding: 20px;
}
</style>